export default {
  data() {
    return {
      specilist: [],
      // 品牌
      historylistpp: '', //品牌历史记录
      scrollTop: 0,
      Brandlist: [],
      indexlist: [],
      addtoView: '', //定位abc
      typeid: '',
      //系列
      bid: '',
      brand: '',
      Serieslist: [], //系列
      typeid: '',
      // 车子
      Seriesid: null,
      visible: true, //picker-view属性配置时间选择器
      indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`, //设置选择器中间选中框的样式
      Configurationlist: [], //配置list-页面渲染显示
      Configuname: '', //配置name-页面渲染显示
      typeid: '', //传入的值，不同的页面传入不同的数字，页面显示不同的区域
      selectShow: 0, //控制列表显示隐藏0规格，1品牌，2系列，3车子
      CarsaddtoView: '', //车子定位
      pageFrom: 'specifAll', // 来自页面
      showPage: false,
      showPage2: false,
      showPage3: false,
    }
  },
  onReady() {
    //改变标题
    let title
    switch (this.selectShow) {
    case 0:
      title = '选择规格'
      break
    case 1:
      title = '选择品牌'
      break
    case 2:
      title = '选择车型'
      break
    case 3:
      title = '选择配置'
      break
    }
    uni.setNavigationBarTitle({
      title: title
    })
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop
  },
  onLoad(typeid) {
    //跳到有规格的模块传入110，直接跳到品牌模块传入120
    this.typeid = typeid.type
    if (this.typeid === '120') {
      this.selectShow = 1
    } else {
      this.selectShow = 0
    }

    this.pageFrom = typeid.pageFrom || 'specifAll'
  },
  onShow() {
    this.getHistoryList() //历史记录
  },
  // 监听返回
  onBackPress(e) {
    const pageOut = {
      '110': 0,
      '120': 1
    }
    if (e.from === 'navigateBack') {
      return false //监听返回onBackPress一定要return
    }
    if (this.selectShow !== pageOut[this.typeid]) {
      this.selectShow -= 1
      //改变标题
      let title
      switch (this.selectShow) {
      case 0:
        title = '选择规格'
        break
      case 1:
        title = '选择品牌'
        break
      case 2:
        title = '选择车型'
        break
      case 3:
        title = '选择配置'
        break
      }
      uni.setNavigationBarTitle({
        title: title
      })
      return true
    } else {
      return false
    }
  },
  // vue实例加载完成
  created() {
    this.specification() // 规格
    // this.brandinterface() //品牌系列配置
    this.GetCarBrandList()
  },
  methods: {
    // 规格
    async specification() {
      try {
        const res = await this.$api.jsonData.specification()
        this.specilist = res.data
      } catch (err) {
        console.log(err)
      }
    },
    // 品牌接口请求
    async GetCarBrandList() {
      try {
        const res = await this.$api.common.GetCarBrandList()
        this.Brandlist = res.data
        this.showPage = true
        this.Brandlist.forEach((item, index) => {
          this.indexlist.push(item.initial)
        })
      } catch (err) {
        console.log(err)
      }
    },
    // 车型配置接口请求
    async GetCarModelAndConfigList(typeid) {
      try {
        let data = {
          'Bid': typeid
        }
        const res = await this.$api.common.GetCarModelAndConfigList(data)
        this.Serieslist = res.data.cartypeList
        this.showPage2 = true
        // this.CartypeList = res.data.cartypeList//赋值系列
      } catch (err) {
        console.log(err)
      }
    },
    //选择规格
    specclick(type) {
      //存储规格
      uni.$emit(this.pageFrom, {
        Speciflist: type
      })
      //跳转品牌
      uni.setNavigationBarTitle({
        title: '选择品牌'
      })
      this.selectShow = 1
    },
    // 品牌
    // 楼层定位
    addressToView(event) {
      var id = event.currentTarget.dataset.id
      this.addtoView = id
    },
    //选择品牌
    searchBrand(type) {
      // 历史记录
      let arr = uni.getStorageSync('historypp') || []
      //历史记录长度  不超过5个添加,超过5个删除
      if (arr.length > 5) {
        arr.splice(5, 1) //删除最后一个多余的品牌再加入选择的第一个品牌
        let index = null
        //如果有相同的品牌直接删除，排到第一个
        arr.forEach((item, i) => {
          if (item.bid === type.bid) {
            index = i
          }
        })
        if (index !== null) {
          arr.splice(index, 1) //取消
        }
        arr.unshift(type) //排序到第一个
        uni.setStorageSync('historypp', arr)
      } else {
        let index = null
        //如果有相同的品牌直接删除，排到第一个
        arr.forEach((item, i) => {
          if (item.bid === type.bid) {
            index = i
          }
        })
        if (index !== null) {
          arr.splice(index, 1) //取消
        }
        arr.unshift(type) //排序到第一个
        uni.setStorageSync('historypp', arr)
      }
      this.getHistoryList()

      // 存储品牌
      uni.$emit(this.pageFrom, {
        brandlist: type
      })
      // this.$store.commit('setBrand', type)       ??????
      //页面显示系列名称/id
      this.brand = type.brand
      this.bid = type.bid
      uni.setNavigationBarTitle({
        title: '选择车型'
      })
      this.selectShow = 2
      //车型配置接口
      this.GetCarModelAndConfigList(this.bid)
    },
    //历史搜索列表
    getHistoryList() {
      uni.getStorage({
        key: 'historypp',
        success: res => {
          this.historylistpp = res.data.slice(0, 5)
        }
      })
    },
    //选择了系列
    seriesbtn(type) {
      //存储系列
      let serJuu = {
        carTypeId: type.carTypeId,
        carTypeName: type.carTypeName
      }
      //系列赋值
      uni.$emit(this.pageFrom, {
        Serieslist: serJuu
      })
      // this.$store.commit('setSeries', serJuu)
      // 赋值配置
      this.Configurationlist = type.carList
      this.showPage3 = true
      //跳转配置
      uni.setNavigationBarTitle({
        title: '选择配置'
      })
      this.selectShow = 3
      uni.createSelectorQuery().select('.containepp').boundingClientRect(data => { //目标节点
        uni.createSelectorQuery().select('.ppbox1').boundingClientRect(res => { //最外层盒子节点
          uni.pageScrollTo({
            duration: 0, //过渡时间必须为0，否则运行到手机会报错
            scrollTop: data.top - res.top - 200 //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离（如res.top - data.top）
          })
        }).exec()
      }).exec()

    },

    // 车子

    // 楼层定位
    caraddressToView(event) {
      this.CarsaddtoView = event.currentTarget.dataset.id
    },
    //当滚动选择，value 改变时触发 change 事件
    // 根据时间跳到不同的事件区域
    bindChange: function(index) {
      this.CarsaddtoView = index.detail.value[0]
      uni.createSelectorQuery().select('#progrn' + this.CarsaddtoView).boundingClientRect(data => { //目标位置的节点：类或者id
        uni.createSelectorQuery().select('.containepp').boundingClientRect(res => { //最外层盒子的节点：类或者id
          var number = data.top - res.top - 196
          uni.pageScrollTo({
            duration: 200, //过渡时间
            scrollTop: number, //到达距离顶部的top值
          })
        }).exec()
      }).exec()
    },

    //配置赋值
    Configbtn(type) {
      //车子name
      uni.$emit(this.pageFrom, {
        Configulist: type,
        pageFrom: this.pageFrom
      })
      // prevPage
      //寻配件点击进入
      if (this.typeid === '120') {
        uni.navigateBack({
          delta: 1
        })
      } else {
        this.selectShow = 0
        uni.navigateBack()
      }
    }

  }
}
